<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
  <comm-head></comm-head>
  
</div>
</body>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.js"></script>
<script>
Vue.component('CommHead',{
  template:`
    <div>
      <h1>我是头部组件</h1>
      <button @click="chanMsg">改变msg</button>
      {{msg}}
    </div>
  `,
  data(){
    return{
      msg: '你好组件'
    }
  },
  methods:{
    chanMsg(){
      this.msg='世界你好'
    }
  },
  watch:{
    msg(){
      console.log( '改变了' );
    }
  }
})
const vm = new Vue ( {
  el: '#app'
} )
</script>
</html>